/*
    地图界面
 */

import React from "react";
import { View, Text, TouchableOpacity, TextInput } from "react-native";
import SearchList from "../module/SearchList";
import { BProps, BState, HeaderView, BaseComponent, Styled } from "../../index";
import { R } from '../../../core';
import {IconFont } from 'enoad-common/src/index';

interface IProps extends BProps {
  data?: any;
}

interface IState extends BState {
  isLoading: boolean;
}

export default class SearchListComponent extends BaseComponent<IProps, IState> {
  searchData: SearchList;

  mySearchInput: any;

  constructor(props: BProps) {
    super(props);
    this.state = {
      isLoading: false,
    };
    this.searchData = new SearchList("Visit");
    this.props.actions.init(this.props.componentId, this.searchData);
  }

  /**
   * 顶部标题栏
   * @returns
   */
  renderCenter = () => {
    return (
      <Text
        numberOfLines={1}
        style={[R.styles.navigationTitleFont, { color: "#262626" }]}
      >
        {(this.props.navigator &&
          this.props.navigator.param &&
          this.props.navigator.param.title) ||
          this.props.title ||
          "搜索"}
      </Text>
    );
  };
  /**
   * 搜索入口
   */
  searchView() {
    return (
      <View style={Styled.SearchView.item}>
        <TouchableOpacity
          style={Styled.SearchView.shop_card}
          onPress={() => this.backPress()}
        >
          <IconFont name={"iconfont-left"} size={20} color={"#404752"} />
        </TouchableOpacity>
        <TouchableOpacity
          style={Styled.SearchView.search}
          onPress={() => {
            this.props.navigator && this.props.navigator.push("SearchList");
          }}
        >
          <TextInput
            ref={(ref) => {
              this.mySearchInput = ref;
            }}
            style={[
              Styled.SearchView.search_text,
              { paddingRight: -5, paddingTop: 2, paddingBottom: 4 },
            ]}
            placeholder={"搜索商品"}
            placeholderTextColor="#b2bdc5"
            underlineColorAndroid="transparent"
          />
          <View style={Styled.SearchView.search_view}>
            <IconFont name={"sousuo"} size={20} color={"#9FA7B5"} />
          </View>

          <TouchableOpacity
            style={Styled.SearchView.search_clear}
            onPress={() => {
              this.mySearchInput.clear();
            }}
          >
            <IconFont name={"shanchuanniu"} size={14} color={"#C5CBD6"} />
          </TouchableOpacity>
        </TouchableOpacity>
        <TouchableOpacity
          style={Styled.SearchView.shop_card}
          onPress={() => {this.backPress()}}
        >
          <Text style={Styled.SearchView.shop_search_text}>{"取消"}</Text>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* <HeaderView
          componentId={this.props.componentId}
          backgroundColor={"#ffffff"}
          leftButtonColor={"#4A4B6D"}
          renderCenter={this.renderCenter}
          navigator={this.props.navigator}
        /> */}
        {this.searchView()}
      </View>
    );
  }
}
